<%@ page language="java" contentType="text/html;charset=GBK"%>
<%@ page import="java.lang.*"%>
<%@ page import="java.sql.*"%>
<%--
<%@ page import="org.sqlite.JDBC"%>
--%>
<html>
<head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title></title>
         <link href="jquery/dist/jquery.jqplot.min.css" rel="stylesheet" />
        <script src="jquery/dist/jquery.min.js"></script>
        <script src="jquery/dist/jquery.jqplot.min.js"></script>
        <script src="jquery/dist/excanvas.min.js"></script>
        <script src="jquery/dist/plugins/jqplot.barRenderer.min.js"></script>
       <script src="jquery/dist/plugins/jqplot.pointLabels.min.js"></script>
       <script src="jquery/dist/plugins/jqplot.canvasAxisTickRenderer.min.js"></script>
     <script src="jquery/dist/plugins/jqplot.cursor.min.js"></script>
       <script src="jquery/dist/plugins/jqplot.highlighter.min.js"></script>
       <script src="jquery/js/jqplot/plugins/jqplot.dateAxisRenderer.min.js"></script>
       <script src="jquery/dist/plugins/jqplot.canvasTextRenderer.min.js"></script>
      <script src="jquery/dist/plugins/jqplot.categoryAxisRenderer.min.js"></script>

      <script>
         $(function (){
 //var line1 = [['12:30',5],['12:31',6],['12:32',7],['12:33',2],['12:34',4],['12:35',8]];

var timedata=document.getElementById("inputtimedata").value;
//alert(lightdata);
var timearray = new Array(); 
timearray=timedata.split(",");
//alert(timedata); 
var xlabel="The lastest datas to "+timearray[0];
//alert(xlabel);
 
 // first fic
var lightdata=document.getElementById("inputlightdata").value;
//alert(lightdata);
var lightarray = new Array(); 
lightarray=lightdata.split(",");
var lightarrayint = new Array();
for(var i=0;i<lightarray.length;i++){
	lightarrayint[i]=parseInt(lightarray[i]);
}
//alert(lightarray[23]);
//
//
/*
var datas[];
for(var j=0;j<20;j++){
	datas.push([timedarray[j],lightarray[j]]);
}*/


 var plot1 = $.jqplot('chart1', [lightarrayint],{
        title:'Light Sensor',
         legend:{show:true,location:'ne' },
         series:[
         {
                label:'Light',
                 markerOptions:{size:6,style:"x"}
         }
         ],
         seriesDefaults:{
          //  pointLabels:{show:true,ypadding:-1},
            color:'#880000',
         },
        axesDefaults:{
          tickRenderer:$.jqplot.CanvasAxisTickRenderer,
           tickOptions:{
             angle:10,//x angle
             fontSize:'10pt',
         }
         },
         axes:{
           xaxis:{
                 label:xlabel,
                 tickOptions:{
                         fontSize:'10pt'
                 },
                 mark:'cross',
		  ticks:[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20],
            tickOptions:{ formatString :'%d',fontSize:'10pt'},

         },
           yaxis:{
            label:"data",
            tickOptions:{ formatString :'%.2f',fontSize:'10pt'},
        	min:0 
	}
         },
	cursor:{
		show:true,
	     	showTooltip:true	     
	},
	highlighter:{
		lineWidthAdjust:20,
		sizeAdjust:20,
 		showTooltip:true,
		tooltipLocation:'nw',
		fadeTooltip:true	
	}
         
 });
 //second fic.
var temdata=document.getElementById("inputtemdata").value;
//alert(temdata);
var temarray = new Array();
temarray=temdata.split(",");
var temarrayfloat =  new Array();
for(var i=0;i<temarray.length;i++){
	temarrayfloat[i]=parseFloat(temarray[i]);
}
 var plot2 = $.jqplot('chart2', [temarrayfloat],{
         title:'Temperature Sensor',
         legend:{show:true,location:'ne' },
         series:[
        {
                 label:'Temperature',
                 markerOptions:{size:6,style:"circle"}
         }
         ],
         seriesDefaults:{
           // pointLabels:{show:true,ypadding:-1},
           color:'#008800',
         },
         axesDefaults:{
           tickRenderer:$.jqplot.CanvasAxisTickRenderer,
           tickOptions:{
             angle:10,//x angle
             fontSize:'10pt'
	     
         }
         },
         axes:{
          xaxis:{
                label:xlabel,
                 tickOptions:{
                       fontSize:'10pt'
                 },
                 mark:'cross',
		  ticks:[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20],
            tickOptions:{ formatString :'%d',fontSize:'10pt'}
         },
           yaxis:{
            label:"data",
            tickOptions:{ formatString :'%.2f',fontSize:'10pt'},
	  min:0,
	  max:45
         }
         },
	cursor:{
		show:true,
	     	showTooltip:true	     
	},
	highlighter:{
		lineWidthAdjust:20,
		sizeAdjust:20,
 		showTooltip:true,
		tooltipLocation:'nw',
		fadeTooltip:true	
	}
         
         
 });
//third fic.
var humdata=document.getElementById("inputhumdata").value;
//alert(humdata);
var humarray = new Array(); 
humarray=humdata.split(",");
var humarrayfloat =  new Array();
for(var i=0;i<humarray.length;i++){
	humarrayfloat[i]=parseFloat(humarray[i]);
}
 var plot3 = $.jqplot('chart3', [humarrayfloat],{
        title:'Humidity Data',
         legend:{show:true,location:'ne' },
        series:[
         {
                 label:'Humidity',
                 markerOptions:{size:6,style:"diamond"}
         }
        ],
        seriesDefaults:{
        //   pointLabels:{show:true,ypadding:-1},
            color:'#000088',
         },
         axesDefaults:{
           tickRenderer:$.jqplot.CanvasAxisTickRenderer,
           tickOptions:{
            angle:10,//x angle
            fontSize:'10pt'
         }
        },
         axes:{
          xaxis:{
                 label:xlabel,
                 tickOptions:{
                        fontSize:'10pt'
                 },
                 mark:'cross',
		  ticks:[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20],
            tickOptions:{ formatString :'%d',fontSize:'10pt'}
         },
           yaxis:{
            label:"%",
            tickOptions:{ formatString :'%.2f',fontSize:'10pt'},
	    min:0,
	    max:100
         }

         },
	cursor:{
		show:true,
	     	showTooltip:true	     
	},
	highlighter:{
		lineWidthAdjust:20,
		sizeAdjust:20,
 		showTooltip:true,
		tooltipLocation:'nw',
		fadeTooltip:true	
	}
         
         
 });

 
 
 })
      </script>

      <script type="text/javascript">
	setInterval(function () {
		window.location.reload();
		}, 2000);
      </script>
 </head>




<%!	
int id;
int humtemp;
float hum;

int findflag=0;
//*********send to pic************//
String lightdata="";
String humdata="";
String temdata="";
String timedata="";
////******************//
String time;
float tem;
int temtemp;
int light;
int record=0;
public  void selectSensorData(int usbnum)
{
String driverName="com.mysql.jdbc.Driver";
String userName="root";
String userPasswd="111533";
String dbName="myfirst";
String tableName="myfirst";
String url="jdbc:mysql://localhost/"+dbName+"?user="+userName+"&password="+userPasswd;
try{
Class.forName("com.mysql.jdbc.Driver").newInstance();
Connection connection=DriverManager.getConnection(url);
Statement statement = connection.createStatement();

String sql="select * from sensor"+usbnum+" order by id desc;";
ResultSet rs=statement.executeQuery(sql);
rs.last();
record=rs.getRow();
if(record>=20){
record=20;
}
rs.first();
//ResultSetMetaData rmeta = rs.getMetaData();
//	int numColumns=rmeta.getColumnCount();
if(rs.next()){
findflag=1;
id = rs.getInt(1);
humtemp= rs.getInt(3);
time= rs.getString(6);
temtemp=rs.getInt(4);
light=rs.getInt(5);
///
//
lightdata=light+",";
humdata=changehum(humtemp)+",";
temdata=changetem(temtemp)+",";
timedata=time+",";
//
}
for(int i=0;i<=record;i++)
{
	rs.next();
	String tmplight="";
	String tmphum="";
	String tmptem="";
	String tmptime="";
	if(i==record){
	tmplight=rs.getInt(5)+"";
	tmphum=changehum(rs.getInt(3))+"";
	tmptem=changetem(rs.getInt(4))+"";
	tmptime=rs.getString(6)+"";
	}else
	{
	tmplight=rs.getInt(5)+",";
	tmphum=changehum(rs.getInt(3))+",";
	tmptem=changetem(rs.getInt(4))+",";
	tmptime=rs.getString(6)+",";
	}
	lightdata+=tmplight;
	temdata+=tmptem;
	humdata+=tmphum;
	timedata+=tmptime;
}
rs.close();
statement.close();
connection.close();

hum=changehum(humtemp);
tem=changetem(temtemp);
if(findflag==0){
hum=0;
tem=0;
light=0;
}else
{
findflag=0;
}
}catch(Exception e)
{
System.err.println(e.getClass().getName()+":"+e.getMessage());
System.exit(0);
}
}

%>


<%!
float changehum(int humtemp)
{
float hum=humtemp*0.0367f;
hum-=2.0468;
if(hum>100){
hum=100;
}
return hum;
}
float changetem(int temtemp)
{
float tem=temtemp/10-400;
tem=tem/10;
tem=tem/4+tem;
return tem;
}

%>
<body>


<body>
<%
request.setCharacterEncoding("utf-8");
String txtMsg = request.getParameter("search"); 
int nodeid=Integer.parseInt(txtMsg);

int usbnum[]={53,77,74,76,49,51,52,78,50,75,35,13,14,36,37,38,10,11,12,34,65,42,43,41,67,66,64,40,39,68,30,29,9,8,6,31,5,32,33,7,25,0,1,28,4,3,24,2,27,26,46,44,69,72,47,45,71,73,48,70,22,23,20,21,60,61,59,19,62,63,18,17,56,55,16,57,58,54};
int usbtmp=usbnum[nodeid];
selectSensorData(usbtmp);

request.setAttribute("lightdata",lightdata);
request.setAttribute("humdata",humdata);
request.setAttribute("temdata",temdata);
request.setAttribute("timedata",timedata);
//HttpServletRequest request = ServletActionContext.getRequest();

%>
<input type="hidden" name="inputlightdata" id="inputlightdata" value="${lightdata}">
<input type="hidden" name="inputtemdata" id="inputtemdata" value="${temdata}">
<input type="hidden" name="inputhumdata" id="inputhumdata" value="${humdata}">
<input type="hidden" name="inputtimedata" id="inputtimedata" value="${timedata}">

<div>
	<!--<h3>nodeid:<%=nodeid%></h3>
	<h3>humility:<%=hum%></h3>
	<h3>temperature:<%=tem%></h3>
	<h3>light:<%=light%></h3>
	<h3>time:<%=time%></h3>
	<h3>usbnum:<%=usbtmp%></h3>-->
</div>
	<div id="chart1" style="height:180px;width:750px;"></div>
	<div id="chart2" style="height:180px;width:750px;"></div>
	<div id="chart3" style="height:180px;width:750px;"></div>
</body>
</html>
